<template>
	<view class="page">

		<view class="nav nav_bar flex_r_between"
			:style="`background: rgba(255, 255, 255,${trans});padding-left: 32rpx;padding-right: 32rpx;`">
			<view class="icon_btn flex_r_around" @click="$util.back()" :style="`background-color: rgba(0, 0, 0, 0.3;`">
				<uni-icons type="back" size="20" color="#FFF"></uni-icons>
			</view>

			<view class="flex_center">
				<!-- 2 审核中 -->
				<view class="actions flex_r_around" @click="beforeAccept" v-if="data.status == 2">
					<text>拒绝</text>
				</view>

				<view class="actions flex_r_around" style="background: #1FC129;" @click="onAgree"
					v-if="data.status == 2">
					<text>同意</text>
				</view>
			</view>
		</view>

		<view class="header">
			<image class="image" :src="data.avatar" mode="aspectFill"></image>

			<view class="bottom flex_center">
				<view class="avatar">
					<image :src="data.avatar" mode="aspectFill"></image>
				</view>
				<text class="hidden">{{ data.nickname || '' }}</text>
				<view class="icon flex_center">
					<image :src="$util.prefix('circle/qi_icon.png')" mode="aspectFill" v-if="data.company_status == 2">
					</image>
					<image :src="$util.prefix('circle/v_icon.png')" mode="aspectFill" v-else-if="data.auth_status == 2">
					</image>
				</view>
			</view>
		</view>

		<view class="p40">

			<view class="sign">
				{{ data.introduce || '' }}
			</view>

			<view class="tags flex_center" v-if="data.tags">
				<view class="item" v-for="(item,index) in data.tags" :key="index">
					<text>{{ item || '' }}</text>
				</view>
			</view>

			<view class="introduce">
				{{ data.content || '' }}
			</view>

			<view class="images" v-if="data.images">
				<u-grid :border="false" :col="3">
					<u-grid-item v-for="(item,index) in data.images" :key="index"
						@click="$util.previewImage(data.images,index)">
						<image :src="item" mode="aspectFill">
						</image>
					</u-grid-item>
				</u-grid>
			</view>

		</view>

		<view class="product">
			<view class="title">活动</view>
			<view class="list">
				<u-grid :border="false" :col="2">
					<u-grid-item v-for="(item,index) in list" :key="index">
						<view class="item" @click="toDetail(item)">
							<view class="header">
								<image :src="item.image" mode="aspectFill"></image>
								<view class="active_tags flex_center">
									<text>{{ item.tags ? item.tags.replaceAll(',','/') : '' }}</text>
								</view>
							</view>

							<view class="name hidden_2">
								{{ item.title || '' }}
							</view>

							<view class="user flex_r_between">
								<view class="left flex_center">
									<image :src="item.avatar" mode="aspectFill"></image>
									<text class="hidden">{{ item.nickname }}</text>
								</view>
								<view class="right flex_r_around" v-if="Number(item.active_price) > 0">
									￥{{ item.active_price }}
								</view>
								<view class="right flex_r_around" v-else>
									免费
								</view>
							</view>

						</view>
					</u-grid-item>
				</u-grid>
			</view>
		</view>

		<u-popup :show="show" @close="show = false" mode="center" round="40rpx">
			<view class="modal">
				<view class="modal_title flex_r_between">
					<text>拒绝原因</text>
					<u-icon name="close-circle" color="#CCCCCC" size="48rpx" @click="show = false"></u-icon>
				</view>

				<view class="modal_textarea">
					<textarea placeholder="请输入" placeholder-class="input-placeholder"
						v-model="check_content"></textarea>
				</view>

				<view class="modal_btn flex_r_around" @click="onAccept">
					<text>确定</text>
				</view>

			</view>
		</u-popup>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				circle_id: 0,
				id: 0,

				data: {},

				trans: 0,

				show: false,
				check_content: '',

				list: [],
				total: 1,
				page: 1,
			}
		},
		methods: {
			getData() {
				this.$get('/circle.circle_call_card/getCallCardInfo', {
					call_card_id: this.id,
					circle_id: this.circle_id,
				}).then(res => {
					this.data = res.data;
					this.data.tags = res.data.tags.split(',');
					this.data.images = res.data.images.split(',');
					this.getList();
				})
			},

			beforeAccept(item) {
				this.show = true;
			},

			onAccept() {
				this.show = false;
				this.$post('/circle.circle_call_card/setReviewStatus', {
					call_card_id: this.data.id,
					status: 3,
					check_content: this.check_content,
					circle_id: this.circle_id,
				}).then(res => {
					this.$util.msg(res.msg);
					this.$util.back();
				})
			},

			onAgree() {
				this.$post('/circle.circle_call_card/setReviewStatus', {
					call_card_id: this.data.id,
					status: 1,
					circle_id: this.circle_id,
				}).then(res => {
					this.$util.msg(res.msg);
					this.$util.back();
				})
			},

			getList() {
				this.$get('/circle.loyou/getLoyouListByUserId', {
					user_id: this.data.user_id,
					page: this.page
				}).then(res => {
					this.total = res.data.total;
					this.list.push(...res.data.data);
				})
			},

			onReach() {
				if (this.total > this.list.length) {
					this.page++;
					this.getList();
				}
			},

			refList() {
				this.list = [];
				this.total = 1;
				this.page = 1;
				this.getList();
			},

		},

		onLoad(option) {
			if (option.token) {
				uni.setStorageSync('token', option.token);
				uni.setStorageSync('cid', option.cid);
				uni.setStorageSync('terminal', option.terminal);
			}
			this.id = option.id || 0;
			this.circle_id = option.circle_id || 0;
			this.getData();
		},

		onPageScroll: function(e) { //nvue暂不支持滚动监听，可用bindingx代替
			if (e.scrollTop <= 200) {
				this.trans = e.scrollTop / 200;
			} else {
				this.trans = 1
			}
		},
	}
</script>

<style lang="less">
	.page {
		min-height: 100vh;
		background: #FFF;
	}

	.nav {
		.icon_btn {
			width: 30px;
			height: 30px;
			border-radius: 15px;

			image {
				width: 30px;
				height: 30px;
			}
		}

		.actions {
			width: 128rpx;
			height: 52rpx;
			background: #FD2A53;
			border-radius: 28rpx;
			margin-right: 12rpx;

			text {
				font-weight: 500;
				font-size: 28rpx;
				color: #FFFFFF;
				line-height: 40rpx;
			}
		}
	}

	.header {
		width: 100vw;
		height: 420rpx;
		position: relative;

		.image {
			width: 100vw;
			height: 420rpx;
		}

		.bottom {
			width: 100vw;
			height: 176rpx;
			background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 100%);
			position: absolute;
			bottom: 0;
			left: 0;
			padding: 0 48rpx;
			overflow: hidden;

			.avatar {
				width: 136rpx;
				height: 136rpx;
				border-radius: 68rpx;
				overflow: hidden;
				box-sizing: content-box;
				border: 4rpx solid #FFFFFF;

				image {
					width: 136rpx;
					height: 136rpx;
				}
			}

			text {
				font-weight: 500;
				font-size: 40rpx;
				color: #FFFFFF;
				margin: 0 28rpx 0 24rpx;
				max-width: 300rpx;
			}

			.icon {
				image {
					width: 40rpx;
					height: 40rpx;
					margin-right: 12rpx;
					border: 2rpx solid #FFFFFF;
					border-radius: 20rpx;
				}
			}
		}
	}

	.p40 {
		padding: 32rpx 40rpx;
	}

	.sign {
		font-size: 28rpx;
		color: #333333;
		line-height: 48rpx;
	}

	.tags {
		flex-wrap: wrap;
		margin: 24rpx 0;

		.item {
			height: 56rpx;
			background: #F1F1F1;
			border-radius: 28rpx;
			padding: 0 50rpx;
			margin: 6rpx;

			text {
				font-size: 24rpx;
				color: #131313;
				line-height: 34rpx;
			}
		}
	}

	.introduce {
		font-size: 28rpx;
		color: #333333;
		line-height: 48rpx;
	}

	.images {
		margin: 24rpx 0 60rpx;

		image {
			width: 216rpx;
			height: 216rpx;
			background: #D8D8D8;
			border-radius: 16rpx;
		}
	}

	.modal {
		width: 616rpx;
		background: #FFFFFF;
		border-radius: 40rpx;
		padding: 34rpx 16rpx 38rpx 32rpx;

		.modal_title {
			text {
				font-weight: 500;
				font-size: 36rpx;
				color: #131313;
				line-height: 50rpx;
			}
		}

		.modal_textarea {
			width: 552rpx;
			height: 208rpx;
			background: #F7F7F7;
			border-radius: 16rpx;
			padding: 24rpx;
			margin: 32rpx 0;
			overflow: hidden;

			textarea {
				font-size: 28rpx;
				color: #333;
				line-height: 36rpx;
			}
		}

		.modal_btn {
			width: 320rpx;
			height: 88rpx;
			background: #FD2A53;
			border-radius: 44rpx;
			margin: 0 auto;

			text {
				font-size: 28rpx;
				color: #FFFFFF;
			}
		}

	}

	.product {
		padding: 60rpx 24rpx 32rpx;

		.title {
			font-weight: 500;
			font-size: 32rpx;
			color: #131313;
			line-height: 44rpx;
			margin-bottom: 24rpx;
			padding: 0 8rpx;
		}

		.list {
			.item {
				width: 336rpx;
				;
				height: 640rpx;
				background: #FFFFFF;
				border-radius: 24rpx;
				overflow: hidden;
				margin: 0 8rpx 16rpx;
				overflow: hidden;

				.header {
					width: 336rpx;
					height: 448rpx;
					overflow: hidden;
					position: relative;

					image {
						width: 336rpx;
						height: 448rpx;
					}

					.header_box {
						position: absolute;
						top: 20rpx;
						left: 0;
						padding: 0 24rpx;
						width: 100%;

						.address {
							background: #00D7A7;
							border-radius: 8rpx;
							padding: 4rpx 12rpx;
							font-size: 24rpx;
							color: #FFFFFF;
							line-height: 32rpx;
						}

						.status {
							width: 128rpx;
							height: 48rpx;
							border-radius: 12rpx;
							backdrop-filter: blur(3px);

							text {
								font-weight: 500;
								font-size: 24rpx;
								color: #FFFFFF;
							}
						}

						.green {
							background: rgba(0, 215, 167, 0.6);
						}

						.red {
							background: rgba(253, 42, 83, 0.6);
						}

						.orange {
							background: RGBA(232, 119, 92, 0.6);
						}
					}

					.active_tags {
						width: 336rpx;
						padding: 12rpx 16rpx;
						position: absolute;
						bottom: 0;
						left: 0;
						background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000000 100%);

						text {
							flex: 1;
							font-weight: 500;
							font-size: 24rpx;
							color: #FFFFFF;
						}

						image {
							width: 40rpx;
							height: 40rpx;
						}
					}

				}

				.name {
					margin: 24rpx 16rpx 12rpx;
					font-weight: 500;
					font-size: 28rpx;
					color: #333333;
					line-height: 40rpx;
				}

				.user {
					margin: 0 16rpx;
					overflow: hidden;

					.left {
						flex: 1;
						overflow: hidden;

						image {
							width: 48rpx;
							height: 48rpx;
							border-radius: 24rpx;
							margin-right: 12rpx;
							flex-shrink: 0;
						}

						text {
							font-size: 24rpx;
							color: #666666;
							flex: 1;
						}

					}

					.right {
						font-weight: 600;
						font-size: 32rpx;
						color: #FD2A53;
					}
				}

			}
		}
	}
</style>